<template>
  <div class="jnpf-content-wrapper">
    <router-view />
    <div class="jnpf-content-wrapper-center">
      <div class="jnpf-content-wrapper-search-box" style="padding-bottom: 12px; display: flex">
        <div class="input-container">
          <label class="label" for="inputField">项目编号:</label>
          <a-input id="inputField" v-model:value="proNumber" placeholder="请输入" />
          <label class="label" for="inputField">项目名称:</label>
          <a-input id="inputField" v-model:value="proName" placeholder="请输入" />
        </div>
        <div class="button">
          <a-button @click="reset">重置</a-button>
          <a-button type="primary" style="margin-left: 10px" @click="init">查询</a-button>
        </div>
      </div>
      <div class="jnpf-content-wrapper-content">
        <div class="table-header">
          <span class="header-title">抽取项目列表</span>
          <a-button type="primary" :icon="h(PlusOutlined)" @click="showModal">新建</a-button>
        </div>
        <a-table
          :columns="columns"
          :loading="tableLoading"
          :data-source="dataList"
          :pagination="paginationProp"
          :scroll="{ x: 1500, y: 410 }"
          :style="{ height: 'calc(100vh - 280px)' }">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.key === 'status'">
              <span class="custom-cell" v-if="text == 0"> <span class="dcq-dot"></span>{{ '待抽取' }} </span>
              <span class="custom-cell" v-if="text == 1"> <span class="ycq-dot"></span>{{ '已抽取' }} </span>
              <span class="custom-cell" v-if="text == 2"> <span class="yzz-dot"></span>{{ '已终止' }} </span>
              <span class="custom-cell" v-if="text == 3"> <span class="ygd-dot"></span>{{ '已归档' }} </span>
            </template>
            <template v-if="column.key === 'operation'">
              <div class="button-container">
                <a-button type="link" class="operation-button" @click="toView(record)">查看</a-button>
                <!-- 手动新建的项目 -->
                <a-button type="link" class="operation-button" v-if="record.type != 0 && record.status == 0" @click="toEdit(record)">编辑</a-button>
                <!-- 系统填报的项目 -->
                <a-button type="link" class="operation-button" v-if="record.type == 0 && record.status == 0" @click="toEdits(record)">编辑</a-button>
                <a-popconfirm title="确认删除?" @confirm="toDel(record)">
                  <a-button type="link" class="operation-button" danger v-if="record.type != 0 && record.status != 1">删除</a-button>
                </a-popconfirm>
                <a-button type="link" class="operation-button" v-if="record.status != 1" @click="toExtraction(record)">抽取</a-button>
                <a-button type="link" class="operation-button" v-if="record.status != 1" @click="toResult(record)">上传抽取结果</a-button>
              </div>
              <!-- <div class="button-container">
                <a-button type="link" class="operation-button" @click="toView(record)">查看</a-button>
                <a-button type="link" class="operation-button" :disabled="record.type == 0 || record.status == 1" @click="toEdit(record)">编辑</a-button>
                <a-popconfirm title="确认删除?" @confirm="toDel(record)">
                  <a-button type="link" class="operation-button" :disabled="record.type == 0 || record.status == 1">删除</a-button>
                </a-popconfirm>
                <a-button type="link" class="operation-button" :disabled="record.status == 1" @click="toExtraction(record)">抽取</a-button>
                <a-button type="link" class="operation-button" :disabled="record.status == 1" @click="toResult(record)">上传抽取结果</a-button>
              </div> -->
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <a-modal v-model:visible="open" :title="addTitle" centered :maskClosable="false" :keyboard="false" :width="600" @ok="handleOk">
      <a-form ref="formRef" :model="formSchemas" name="tree-node" :rules="rules" autocomplete="off" :label-col="{ style: { width: '120px' } }" :colon="false">
        <a-form-item label="项目编号" name="proNumber">
          <a-input v-model:value="formSchemas.proNumber" :disabled="addTitle == '查看'" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="项目名称" name="proName">
          <a-input v-model:value="formSchemas.proName" :disabled="addTitle == '查看' || addTitle == '项目编辑'" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="评标时间" name="proTime">
          <a-date-picker
            show-time
            v-model:value="formSchemas.proTime"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择(xxxx-xx-xx xx:xx)"
            :disabled="addTitle == '查看'"
            @change="onChange"
            @ok="onOk" />
        </a-form-item>
        <a-form-item label="代理机构" name="proOrg">
          <a-select v-model:value="formSchemas.proOrg" :disabled="addTitle == '查看'" placeholder="请选择" :options="options" @change="handleChange"></a-select>
        </a-form-item>
        <a-form-item label="评标地点" name="proAddress">
          <a-input v-model:value="formSchemas.proAddress" :disabled="addTitle == '查看'" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 专家组别弹窗 -->
    <a-modal v-model:visible="isZbShow" title="选择专家组别" centered :maskClosable="false" :keyboard="false" :width="400" @ok="handleZbOk">
      <a-form
        ref="formZbRef"
        :model="formExperts"
        name="tree-node"
        :rules="expertRules"
        autocomplete="off"
        :label-col="{ style: { width: '120px' } }"
        style="height: 360px"
        :colon="false">
        <a-form-item label="专家组别" name="experts" style="margin-top: 20px">
          <a-select v-model:value="formExperts.experts" placeholder="请选择" :options="selectOption" @change="expertChange"></a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 确认参加弹窗 -->
    <a-modal v-model:visible="confirmedShow" title="参加确认" centered :maskClosable="false" :keyboard="false" :width="400" @ok="handleConfirmed">
      <a-form
        ref="formQrRef"
        :model="onfirmedInfo"
        name="tree-node"
        :rules="confirmedrules"
        autocomplete="off"
        :label-col="{ style: { width: '120px' } }"
        style="height: 360px"
        :colon="false">
        <a-form-item label="参加状态" name="status" style="margin-top: 20px">
          <a-radio-group v-model:value="onfirmedInfo.status">
            <a-radio value="1">参加</a-radio>
            <a-radio value="2">不参加</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="备注" style="margin-top: 20px">
          <a-textarea v-model:value="onfirmedInfo.remarks" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 抽取弹窗 -->
    <a-modal
      v-model:visible="extractionShow"
      title="招投标公司抽取"
      centered
      :maskClosable="false"
      :keyboard="false"
      :width="950"
      @cancel="stopTimer"
      @ok="handleExtraction">
      <div class="ext_box">
        <div class="ext_left">
          <div class="ext_time">
            {{ formattedTimeLeft }}
            <div class="end" v-if="isEndShow">抽取结束</div>
          </div>
          <a-button type="primary" @click="toErRdraw">重新抽取</a-button>
        </div>
        <div class="ext_right">
          <div class="result_box">
            <div class="result_box_btn">
              <div class="result_box_title">抽中投标公司名单</div>
            </div>
            <a-table bordered :data-source="extractedData" :pagination="false" :columns="expertColumns" style="height: 250px" :scroll="{ y: 250 }">
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'expertGroup'">
                  {{ getValue(text) }}
                </template>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 抽取页面 -->
    <a-row v-if="isVisible" class="p-10px dynamic-form" :style="{ margin: '0 auto', width: '100%', position: 'relative', background: '#fafafa' }">
      <div class="back-btn"><ArrowLeftOutlined style="margin-right: 5px" @click="backList" /> 返回</div>
      <div class="fullscreen-container">
        <div class="tab_box">
          <div class="btn_add">
            <a-button type="primary" :icon="h(PlusOutlined)" v-if="addTitle != '查看'" @click="add">添加评审</a-button>
          </div>
          <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit" @change="changeTab">
            <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
              <div class="tab-content">
                <div class="detail_top">
                  <span class="header-title">项目基本信息</span>
                  <div class="container">
                    <div class="box"
                      >项目编号：<span>{{ extractForm.xmbh }}</span></div
                    >
                    <div class="box"
                      >项目名称：<span>{{ extractForm.xmmc }}</span></div
                    >
                    <div class="box"></div>
                  </div>
                  <div class="container">
                    <div class="box"
                      >开标时间：<span>{{ extractForm.kbsj }}</span></div
                    >
                    <div class="box"
                      >评标时间：<span>{{ extractForm.pbsj }}</span></div
                    >
                    <div class="box"
                      >评标地点：<span>{{ extractForm.pbdd }}</span></div
                    >
                  </div>
                  <div class="container">
                    <div class="box"
                      >创建人：<span>{{ extractForm.cjr }}</span></div
                    >
                    <div class="box"
                      >创建时间：<span>{{ extractForm.cjsj }}</span></div
                    >
                    <div class="box"></div>
                  </div>
                </div>
                <div class="detail_bottom">
                  <div class="line">
                    <div class="detail_bottom_btn">
                      <div class="detail_title">招投标代理服务机构（{{ dataSource.length }}）</div>
                      <div style="display: flex; padding-top: 5px" v-if="addTitle != '查看'">
                        <div style="width: 40px; padding-top: 2px">抽取:</div>
                        <a-input-number v-model:value="dataNum" placeholder="请输入" style="width: 40% !important; height: 30px; margin: 0 5px" />家
                        <a-button type="primary" style="margin-left: 10px" @click="hasExtraction(pane)">{{ buttonTitle }}</a-button>
                      </div>
                      <!-- <a-button :icon="h(PlusOutlined)"  @click="handleAdd(pane)">添加</a-button> -->
                    </div>
                    <a-table bordered :data-source="dataSource" :pagination="false" :columns="listColumns" style="margin-top: 10px" :scroll="{ y: 300 }">
                      <template #bodyCell="{ column, text, record, index }">
                        <template v-if="column.dataIndex === 'groupName'">
                          <div class="editable-cell">
                            <a-select
                              ref="select"
                              v-model:value="record[column.dataIndex]"
                              style="width: 120px"
                              :options="selectOption"
                              :disabled="record.numberOfParticipants == 0"
                              :open="false"
                              @click="selectfocus(record, index, pane)"></a-select>
                          </div>
                        </template>
                        <template v-if="column.dataIndex === 'numberOfExtract'">
                          <div class="editable-cell" style="padding: 10px">
                            <a-input-number :disabled="record.numberOfParticipants == 0" v-model:value="record[column.dataIndex]" :max="selectOption.length" />
                          </div>
                        </template>
                        <template v-else-if="column.dataIndex === 'operation'">
                          <a-popconfirm v-if="record.showDelButton" title="确认删除?" @confirm="onDelete(pane, index)">
                            <a>删除</a>
                          </a-popconfirm>
                        </template>
                      </template>
                    </a-table>
                  </div>
                  <!-- <div class="btn_box">
                    <a-button class="btn_submit" type="primary" v-if="isSubmitVisible" @click="handleSubmit(pane)">提交</a-button>
                  </div> -->
                </div>
                <!-- <div class="extraction_box" v-if="false">
                  <div>
                    <span>本次抽取专家数：{{ extractForm.cqzjs || 0 }}人</span>
                    <span style="margin-left: 25px">确认参加人数：{{ extractForm.qrcjs || 0 }}人</span>
                  </div>
                  <div>
                    <a-button style="margin-left: 15px" type="primary" v-if="addTitle != '查看'" @click="hasExtraction(pane)">{{ buttonTitle }}</a-button>
                  </div>
                </div> -->
                <div class="result_box">
                  <div class="result_box_btn">
                    <div class="result_box_title">抽取结果</div>
                    <div>
                      <span style=""
                        >确认参加：<span style="color: #4d8cdf; font-weight: bold">{{ extractForm.qrcjs || 0 }}</span></span
                      >
                      <span style="margin: 0 10px"
                        >待确认：<span style="color: #de9654; font-weight: bold">{{ extractForm.cqzjs || 0 }}</span></span
                      >
                      <a-button v-if="!uploadResultsInfo.url" :icon="h(DownloadOutlined)" @click="handlePlot">{{ '结果打印' }}</a-button>
                      <a-button v-if="uploadResultsInfo.url" :icon="h(DownloadOutlined)" @click="handleResult">{{ '下载最终结果' }}</a-button>
                    </div>
                  </div>
                  <a-table bordered :data-source="pane.content.extractExpertsInfo" :pagination="false" :columns="resultColumns">
                    <template #bodyCell="{ column, record, text }">
                      <template v-if="column.dataIndex === 'status'">
                        <span style="color: #ea0000" v-if="text == 2">不参加</span>
                        <span style="color: #3cba43" v-if="text == 1">参加</span>
                        <span style="color: #ff8d23" v-if="text == 0">待确认</span>
                      </template>
                      <template v-if="column.dataIndex === 'operation' && addTitle != '查看'">
                        <a-button type="link" class="operation-button" :disabled="record.status == 1 || record.status == 2" @click="toConfirmed(record)"
                          >参加确认</a-button
                        >
                      </template>
                    </template>
                  </a-table>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-row>
    <!-- 上传组件 -->
    <FileUploader ref="fileUploaderRef" v-bind="getBindValue" @fileSuccess="handleFileSuccess" />
  </div>
</template>

<script lang="ts" setup>
  import {
    getList,
    queryInfo,
    lotAdd,
    lotEdit,
    lotDelete,
    dictionaryData,
    zjData,
    queryReviewInfo,
    addReview,
    editReview,
    deleteReview,
    getExpertsByExpertGroup,
    saveExtractionResults,
    confirmation,
    getFileInBody,
    resultPrinting,
    uploadExtractionResults,
    getUnitList,
  } from './helper/api';
  import { downloadByUrl } from '/@/utils/file/download';
  import FileUploader from './FileUploader.vue';
  import { ref, h, onMounted, toRefs, reactive, computed, onUnmounted, readonly } from 'vue';
  import { Modal as AModal, DatePicker as ADatePicker } from 'ant-design-vue';
  import { PlusOutlined, CheckOutlined, EditOutlined, DownloadOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
  import type { FormInstance } from 'ant-design-vue';
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  // import dayjs from 'dayjs';
  // import { getList} from './helper/api';
  import { forEach, filter } from '../../../utils/helper/treeHelper';
  import { Options } from '../../../components/CodeEditor/src/monacoEditor/monacoEditorType';
  import { update } from '../../../api/extend/document';
  // 文件上传
  import { getToken } from '/@/utils/auth';
  import { useGlobSetting } from '/@/hooks/setting';
  import { uploadFileProps, fileItem } from './props';
  const props = defineProps(uploadFileProps);
  const globSetting = useGlobSetting();

  const getBindValue = computed(() => ({ ...props, value: fileList.value }));
  const fileUploaderRef = ref<any>(null);
  const fileList = ref([]);
  // 分页列表
  const columns = [
    { title: '序号', width: 60, customRender: ({ index }) => index + 1, dataIndex: 'name', key: 'name', align: 'center' },
    { title: '项目编号', width: 80, dataIndex: 'projectNumber', key: 'projectNumber', align: 'center' },
    { title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 250, align: 'center' },
    { title: '开标时间', dataIndex: 'bidOpeningTime', key: 'bidOpeningTime', width: 150, align: 'center' },
    { title: '评标时间', dataIndex: 'bidEvaluationTime', key: 'bidEvaluationTime', width: 150, align: 'center' },
    { title: '评标地点', dataIndex: 'bidEvaluationLocation', key: 'bidEvaluationLocation', width: 150, align: 'center' },
    { title: '状态', dataIndex: 'status', key: 'status', width: 150, align: 'center' },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 150,
    },
  ];
  // 抽取数据过滤 二次抽取
  function calculateDifference(listA, listB) {
    if (!listA || !listB) return [];
    // 1. 创建一个对象来保存每个 group 的实际数量
    const actualCounts = {};

    // 2. 遍历 listB，统计每个 group 中 status 为 1 的数量
    listB.forEach(item => {
      if (item.status === '1') {
        const groupCode = item.expertGroup;
        if (!actualCounts[groupCode]) {
          actualCounts[groupCode] = 0;
        }
        actualCounts[groupCode] += 1;
      }
    });

    // 3. 遍历 listA，计算差值
    return listA.map(aItem => {
      const groupCode = aItem.groupCode;
      const numberOfExtract = parseInt(aItem.numberOfExtract, 10);
      const actualCount = actualCounts[groupCode] || 0;

      // 返回差值
      return {
        groupCode,
        numberOfExtract: numberOfExtract - actualCount,
      };
    });
  }
  //分页相关
  const page = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const paginationProp = ref({
    showSizeChanger: false,
    showQuickJumper: true,
    pageSize,
    current: page,
    total,
    showTotal: total => `总 ${total} 条`,
    onChange: pageChange,
    onShowSizeChange: pageSizeChange,
  });
  function pageChange(p, pz) {
    page.value = p;
    pageSize.value = pz;
    init();
  }
  function pageSizeChange(_current, size) {
    pageSize.value = size;
    init();
  }
  const dataList = ref<any[]>([]); //分页数组
  // 新建弹窗组织机构数组
  const options = ref([]);
  // 专家组别数组
  const selectOption = ref<any>([]);
  // 专家组别下拉框change事件
  const expertChange = value => {
    console.log(`expertChange ${value}`);
  };
  interface State {
    formSchemas: any; //新增弹窗表单
    formExperts: any; //专家组别弹窗表单
    onfirmedInfo: any; //确认参加弹窗表单
    extractForm: any; //抽取列表详情
  }
  // 新增弹窗校验
  const rules = {
    // proNumber: [{ required: true, message: '必填' }],
    proName: [{ required: true, message: '必填' }],
    // proTime: [{ required: true, message: '必填' }],
    // proOrg: [{ required: true, message: '必填' }],
    // proAddress: [{ required: true, message: '必填' }],
  };
  // 专家组别弹窗校验
  const expertRules = {
    experts: [{ required: true, message: '必填' }],
  };
  // 确认参加弹窗校验
  const confirmedrules = {
    status: [{ required: true, message: '必填' }],
  };
  const addTitle = ref<string>('新增项目'); //新增弹窗标题
  const proNumber = ref<string>(''); //项目编号
  const proName = ref<string>(''); //项目名称
  const open = ref<boolean>(false); //新增弹窗
  const tableLoading = ref<boolean>(false); //列表loading
  const isZbShow = ref<boolean>(false); //专家组别弹窗
  const confirmedShow = ref<boolean>(false); //确认参加弹窗
  const extractionShow = ref<boolean>(false); //抽取弹窗
  const KEY = ref<string>(''); //KEY
  const paneKey = ref<string>(''); //KEY
  const proId = ref<any>(''); //项目ID
  const uploadResultsInfo = ref<any>({}); //结果下载信息
  const buttonTitle = ref<any>('开始抽取'); //按钮名称
  const dataNum = ref<any>(0); //默认起始数量
  const hasExtractionId = ref<any>(''); //抽取暂存ID
  const tabList = ref<any>([]); //分页数据
  const formRef = ref<FormInstance>(); //新增弹窗dom
  const formZbRef = ref<FormInstance>(); //专家组别弹窗dom
  const formQrRef = ref<FormInstance>(); //确认参加弹窗dom
  const isVisible = ref<boolean>(false); //抽取测试
  const isSubmitVisible = ref<boolean>(false); //抽取提交变量
  const isCqShow = ref<boolean>(false); //抽取页面变量
  const isEndShow = ref<boolean>(false); //抽取结束变量
  const cqList = ref<any>([]); //抽取数组
  const dataIndex = ref<any>(0); // 用于跟踪当前抽取的数据索引
  const state = reactive<State>({
    formSchemas: {
      proNumber: '', //项目编号
      proName: '', //项目名称
      proTime: '', //评标时间
      proOrg: '', //评标组织
      proAddress: '', //评选地点
      id: '', //id
    },
    formExperts: {
      experts: '', //专家组别
    },
    onfirmedInfo: {
      id: '', //参加状态
      status: '1', //参加状态
      remarks: '', //备注
      expertId: '', //备注
    },
    extractForm: {
      xmbh: '项目编号', //项目编号
      xmmc: '项目编号', //项目编号
      kbsj: '开标时间', //开标时间
      pbsj: '评标时间', //评标时间
      pbdd: '评标地点', //评标地点
      cjr: '创建人', //创建人
      cjsj: '创建时间', //创建时间
      cqzjs: '3', //本次抽取专家数
      qrcjs: '2', //确认参加人数
    },
  });
  const { formSchemas, formExperts, onfirmedInfo, extractForm } = toRefs(state);
  function handleFileSuccess(data) {
    let params = {
      id: proId.value,
      uploaderVO: {
        name: data.name,
        url: data.url,
        fileVersionId: data.fileId,
        fileSize: data.fileSize,
        fileExtension: data.fileExtension,
        thumbUrl: data.url,
      },
    };
    uploadExtractionResults(params).then(res => {
      init();
      createMessage.success('操作成功！');
    });
    console.log('data', data);
  }
  onMounted(() => {
    init();
  });
  // 初始化数据
  const init = () => {
    queryList(); //分页列表
    jgList(); //组织机构列表
    zjList(); //专家列表
  };
  const backList = () => {
    isVisible.value = false;
  };
  const processData = data => {
    if (!Array.isArray(data)) return data;
    return data.map(item => {
      // 提取 contactInformation
      const contactInformation = item.contactInformation || [];

      // 分别提取 contactName 和 contactPhone
      const contactNames = contactInformation.map(contact => contact.contactName);
      const contactPhones = contactInformation.map(contact => contact.contactPhone);

      // 返回新的数据结构
      return {
        ...item,
        // contactInformation: undefined, // 移除原来的 contactInformation
        contactNames: contactNames,
        contactPhones: contactPhones,
      };
    });
  };
  // 分页列表
  const queryList = () => {
    tableLoading.value = true;
    getList({
      pageNum: page.value,
      pageSize: pageSize.value,
      orderBy: null,
      lotteryType: 2,
      projectNumber: proName.value, //项目编号
      projectName: proName.value, //项目名称
      menuId: '572406059134626629',
    }).then(res => {
      total.value = res.data.total;
      dataList.value = res.data.records;
      tableLoading.value = false;
    });
  };
  //重置数据
  const reset = () => {
    proNumber.value = '';
    proName.value = '';
    init();
  };
  //查看
  const toView = v => {
    addTitle.value = '查看';
    // queryInfo({
    //   id: v.id,
    // }).then(res => {
    //   console.log('res', res);
    //   state.formSchemas = {
    //     proNumber: res.data.projectNumber, //项目编号
    //     proName: res.data.projectName, //项目名称
    //     proTime: res.data.bidEvaluationTime, //评标时间
    //     proOrg: res.data.agency, //评标组织
    //     proAddress: res.data.bidEvaluationLocation, //评选地点
    //   };
    // });
    // open.value = true;
    getExtractionInfo(v.id);
    proId.value = v.id;
    isVisible.value = true;
  };
  // 组织机构字典数据
  const jgList = () => {
    dictionaryData().then(res => {
      console.log('res', res);
      res.data.list.forEach(o => {
        o.label = o.fullName;
        o.value = o.enCode;
      });
      options.value = res.data.list;
    });
  };
  // 专家字典数据
  const zjList = () => {
    zjData().then(res => {
      res.data.list.forEach(o => {
        o.label = o.fullName;
        o.value = o.id;
      });
      selectOption.value = res.data.list;
    });
  };
  //新增项目
  const addPro = () => {
    lotAdd({
      projectNumber: state.formSchemas.proNumber,
      projectName: state.formSchemas.proName,
      bidEvaluationTime: state.formSchemas.proTime,
      bidEvaluationLocation: state.formSchemas.proAddress,
      agency: state.formSchemas.proOrg,
      lotteryType: 2,
    }).then(res => {
      console.log('addPro', res);
      init();
      open.value = false;
    });
  };
  //编辑项目
  const editPro = () => {
    lotEdit({
      projectNumber: state.formSchemas.proNumber,
      projectName: state.formSchemas.proName,
      bidEvaluationTime: state.formSchemas.proTime,
      bidEvaluationLocation: state.formSchemas.proAddress,
      agency: state.formSchemas.proOrg,
      id: state.formSchemas.id,
      lotteryType: 2,
    }).then(res => {
      console.log('addPro', res);
      init();
      open.value = false;
    });
  };
  //编辑
  const toEdit = v => {
    addTitle.value = '编辑';
    state.formSchemas = {
      proNumber: v.projectNumber, //项目编号
      proName: v.projectName, //项目名称
      proTime: v.bidEvaluationTime, //评标时间
      proOrg: v.agency, //评标组织
      proAddress: v.bidEvaluationLocation, //评选地点
      id: v.id,
    };
    open.value = true;
  };
  //项目编辑
  const toEdits = v => {
    addTitle.value = '项目编辑';
    state.formSchemas = {
      proNumber: v.projectNumber, //项目编号
      proName: v.projectName, //项目名称
      proTime: v.bidEvaluationTime, //评标时间
      proOrg: v.agency, //评标组织
      proAddress: v.bidEvaluationLocation, //评选地点
      id: v.id,
    };
    open.value = true;
  };
  //删除
  const toDel = v => {
    lotDelete({
      id: v.id,
    }).then(res => {
      console.log('toDel', res);
      createMessage.success('删除成功!');
      init();
    });
  };
  // 抽取
  const toExtraction = v => {
    proId.value = v.id;
    addTitle.value = '';
    getExtractionInfo(v.id);
    console.log('toExtraction', v);
    isVisible.value = true;
  };
  //上传抽取结果
  const toResult = v => {
    proId.value = v.id;
    console.log('toResult', v);
    fileUploaderRef.value?.openUploader();
  };
  // 新增弹窗
  const showModal = () => {
    addTitle.value = '新建';
    state.formSchemas = {
      proNumber: '', //项目编号
      proName: '', //项目名称
      proTime: '', //评标时间
      proOrg: '', //评标组织
      proAddress: '', //评选地点
      id: '', //id
    };
    open.value = true;
  };
  // 新建弹窗时间选择
  const onChange = (value, dateString) => {
    console.log('Selected Time: ', value, dateString);
    state.formSchemas.proTime = value;
  };
  // 新建弹窗选中时间事件
  const onOk = value => {
    state.formSchemas.proTime = value;
  };
  // 新建弹窗组织机构选中事件
  const handleChange = value => {
    console.log(`selected ${value}`);
  };
  //确认新建弹窗
  const handleOk = async () => {
    try {
      const values = await formRef.value?.validate();
      if (values) {
        if (addTitle.value == '新建') return addPro();
        if (addTitle.value == '项目编辑') return editPro();
        if (addTitle.value == '编辑') return editPro();
      }
    } catch (_) {}
  };
  //专家组别确认弹窗
  const handleZbOk = async () => {
    try {
      const values = await formZbRef.value?.validate();
      if (values) {
        let data = panes.value.find(item => item.key == paneKey.value);
        let obj = selectOption.value.find(item => item.id == values.experts);
        let list = data.content.expertGroupInfo;
        list.forEach((item, index) => {
          if (index == KEY.value) {
            item.groupName = obj.label;
            item.groupCode = obj.id;
          }
        });
        isZbShow.value = false;
      }
    } catch (_) {}
  };
  //专家组别确认弹窗
  const handleConfirmed = async () => {
    try {
      const values = await formQrRef.value?.validate();
      if (values) {
        let params = {
          id: state.onfirmedInfo.id,
          status: state.onfirmedInfo.status,
          remark: state.onfirmedInfo.remarks,
          expertId: state.onfirmedInfo.expertId,
        };
        confirmation(params).then(res => {
          confirmedShow.value = false;
          res && createMessage.success('操作成功');
          updateList(state.onfirmedInfo.id);
        });
      }
    } catch (_) {}
  };
  //抽取弹窗确认事件
  const handleExtraction = () => {
    if (isEndShow.value == false) return createMessage.error('当前抽取还未结束!');
    let params = {
      id: hasExtractionId.value,
      extractExpertsInfo: extractedData.value,
    };
    saveExtractionResults(params).then(res => {
      stopTimer();
      extractionShow.value = false;
      updateList(hasExtractionId.value);
      // getExtractionInfo(proId.value);
    });
  };
  const generatePanes = count => {
    return Array.from({ length: count }, (_, index) => {
      const num = index + 1;
      return {
        title: `第${numberToChinese(num)}次评审`,
        content: null,
        key: `${num}`,
      };
    });
  };
  const panes = ref<any>([{ title: '第一次评审', content: [], key: '1' }]);
  const activeKey = ref(panes.value[0].key);
  const newTabIndex = ref(panes.value.length + 1);
  const numberToChinese = num => {
    const chineseNumbers = {
      1: '一',
      2: '二',
      3: '三',
      4: '四',
      5: '五',
      6: '六',
      7: '七',
      8: '八',
      9: '九',
      0: '零',
    };

    return num
      .toString()
      .split('')
      .map(digit => chineseNumbers[digit] || digit)
      .join('');
  };
  //添加评审事件
  const add = () => {
    const newKey = `${newTabIndex.value++}`;
    panes.value.push({
      title: `第${numberToChinese(Number(newKey))}次评审`,
      content: '',
      key: newKey,
    });
    activeKey.value = newKey;
    isCqShow.value = false;
    isSubmitVisible.value = false;
    state.extractForm.cqzjs = 0;
    state.extractForm.qrcjs = 0;
    dataNum.value = 0;
    buttonTitle.value = '开始抽取';
    addReview({ id: proId.value }).then(res => {
      getExtractionInfos(proId.value);
    });
  };
  //抽取列表Tab移除事件
  const remove = (targetKey: string) => {
    let lastIndex = 0;
    newTabIndex.value = panes.value.length;
    if (panes.value.length == 1) return (isVisible.value = false);
    panes.value.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    panes.value = panes.value.filter(pane => pane.key !== targetKey);
    if (panes.value.length && activeKey.value === targetKey) {
      if (lastIndex >= 0) {
        activeKey.value = panes.value[lastIndex].key;
      } else {
        activeKey.value = panes.value[0].key;
      }
    }
  };
  // tab切换事件 重置状态
  const changeTab = targetKey => {
    console.log('targetKey', targetKey);
    let data = panes.value.find(item => item.key == targetKey);
    // let result = calculateDifference(data.content.expertGroupInfo, data.content.extractExpertsInfo);
    // if (result.length > 0) {
    //   //有返回所以可以二次抽取
    //   isCqShow.value = true;
    // }
    getUnitArray(data.content.id);
    updateList(data.content.id);
    isSubmitVisible.value = false; //重置按钮
    KEY.value = ''; //重置key
    paneKey.value = '';
  };
  // 抽取列表Tab移除事件
  const onEdit = targetKey => {
    if (addTitle.value != '查看') {
      createConfirm({
        iconType: 'warning',
        title: '温馨提示',
        content: targetKey == 1 ? '最少保留一条抽取记录,点确定返回列表页！' : `请确认是否要删除该条数据,删除后则该条数据不再显示。`,
        onOk: () => {
          console.log('targetKey', targetKey);
          let data = panes.value.find(item => item.key == targetKey);
          if (data.content.id && addTitle.value != '查看' && targetKey > 1) {
            deleteReview({ id: data.content.id }).then(res => {
              isSubmitVisible.value = false;
              getExtractionInfo(proId.value);
            });
          }
          remove(targetKey);
        },
      });
    } else {
      remove(targetKey);
    }
  };
  //抽取列表
  const listColumns = [
    {
      title: '序号',
      customRender: ({ index }) => index + 1,
      width: '20%',
      align: 'center',
    },
    {
      title: '公司编号',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '招投标公司',
      dataIndex: 'companyName',
      width: '20%',
      align: 'center',
    },
    {
      title: '联系人',
      dataIndex: 'contactNames',
      align: 'center',
    },
    {
      title: '联系方式',
      dataIndex: 'contactPhones',
      align: 'center',
    },
  ];
  // 抽取列表数组
  const dataSource = ref<any>([]);
  // 获取公司列表
  const getUnitArray = v => {
    getUnitList(v).then(res => {
      res.data = processData(res.data);
      res.data.forEach(v => {
        v.contactNames = v.contactNames.join('，');
        v.contactPhones = v.contactPhones.join('，');
      });
      dataSource.value = res.data;
      console.log('dataSource.value', dataSource.value);
    });
  };
  const editableData = reactive({});
  const onDelete = (v, key) => {
    let data = panes.value.find(item => item.key == v.key);
    data.content.expertGroupInfo = data.content.expertGroupInfo.filter((item, index) => index !== key);
    if (v.content && v.content.id) {
      let params = {
        id: v.content.id,
        expertGroupInfo: data.content.expertGroupInfo,
      };
      editReview(params).then(res => {
        getExtractionInfo(proId.value);
      });
    }
  };
  const handleAdd = v => {
    let data = {
      groupCode: '',
      groupName: '',
      numberOfExpert: selectOption.value.length,
      numberOfExtract: '',
      showDelButton: true,
    };
    if (v.content.expertGroupInfo && v.content.expertGroupInfo.length > 0) {
      v.content.expertGroupInfo.push(data);
    } else {
      v.content = {};
      v.content.expertGroupInfo = [data];
    }
    state.extractForm.cqzjs = v.content.expertGroupInfo.reduce((acc, item) => {
      const value = typeof item.numberOfExtract === 'string' ? Number(item.numberOfExtract) : item.numberOfExtract;
      return acc + value;
    }, 0);
    state.extractForm.qrcjs = v.content.expertGroupInfo.reduce((acc, item) => {
      const value = typeof item.numberOfParticipants === 'string' ? Number(item.numberOfParticipants) : item.numberOfParticipants;
      return acc + value;
    }, 0);
    isSubmitVisible.value = true;
    isCqShow.value = false;
  };
  const selectfocus = (key, value, pane) => {
    console.log('key', key, value, pane);
    state.formExperts.experts = '';
    isZbShow.value = true;
    KEY.value = value; //暂存key值方便直接替换
    paneKey.value = pane.key; //暂存数组值方便直接替换
  };
  // 提交抽取列表
  const handleSubmit = v => {
    let data = panes.value.find(item => item.key == v.key);
    let params = {
      expertGroupInfo: data.content.expertGroupInfo,
    };
    console.log('v', v);
    if (v.content && v.content.id) {
      params.id = data.content.id;
      editReview(params).then(res => {
        // getExtractionInfo(proId.value);
        updateList(data.content.id);
        res && createMessage.success('编辑成功');
        isSubmitVisible.value = false; //点击完提交 隐藏提交按钮
      });
    } else {
      params.id = proId.value;
      addReview(params).then(res => {
        getExtractionInfo(proId.value);
        res && createMessage.success('添加成功');
        isSubmitVisible.value = false; //点击完提交 隐藏提交按钮
      });
    }
    isCqShow.value = true; //点击完提交 展示抽取页面
  };
  // 获取抽取项目基本信息
  const getExtractionInfo = v => {
    queryInfo({
      id: v,
    }).then(res => {
      console.log('res', res);
      if (res.data.uploadResultsInfo) {
        uploadResultsInfo.value = res.data.uploadResultsInfo;
        console.log('uploadResultsInfo.value', uploadResultsInfo.value);
      }
      state.extractForm = {
        xmbh: res.data.projectNumber, //项目编号
        xmmc: res.data.projectName, //项目编号
        kbsj: res.data.bidOpeningTime, //开标时间
        pbsj: res.data.bidEvaluationTime, //评标时间
        pbdd: res.data.bidEvaluationLocation, //评标地点
        cjr: res.data.updateName, //创建人
        cjsj: res.data.updateTime, //创建时间
        cqzjs: '', //本次抽取专家数
        qrcjs: '', //确认参加人数
      };
      // 如果res.data.lotteryReviewList 有值 说明之前评审过 调取评审详情
      if (res.data.lotteryReviewList.length > 0) {
        if (res.data.lotteryReviewList.length > 0 && res.data.lotteryReviewList[0].extractExpertsInfo) {
          res.data.lotteryReviewList[0].extractExpertsInfo = processData(res.data.lotteryReviewList[0].extractExpertsInfo);
          res.data.lotteryReviewList[0].extractExpertsInfo.forEach(v => {
            v.contactNames = v.contactNames.join('，');
            v.contactPhones = v.contactPhones.join('，');
          });
          // state.extractForm.cqzjs = res.data.lotteryReviewList[0].extractExpertsInfo.length - 1;
          // state.extractForm.qrcjs = res.data.lotteryReviewList[0].extractExpertsInfo.count;
        }
        tabList.value = res.data.lotteryReviewList.reverse(); //总的tab页
        panes.value = generatePanes(res.data.lotteryReviewList.length);
        // activeKey.value = panes.value[0].key;
        newTabIndex.value = panes.value.length + 1;
        panes.value.forEach((o, index) => {
          tabList.value.forEach((item, idx) => {
            if (index === idx) {
              o.content = item;
            }
          });
        });
        // 如果抽取人数 跟 实际参加确认人数不一致展示抽取按钮
        console.log('panes.value', panes.value);
        let upadateListID = panes.value.find(item => item.key == activeKey.value);
        getUnitArray(upadateListID.content.id);
        let data = panes.value[0].content;
        if (data.extractExpertsInfo && data.extractExpertsInfo.length > 0) {
          buttonTitle.value = '再次抽取';
        } else {
          buttonTitle.value = '开始抽取';
        }
        updateList(data.id);
        // let result = calculateDifference(data.expertGroupInfo, data.extractExpertsInfo);
        // if (result.length > 0) {
        //   //有返回所以可以二次抽取
        //   isCqShow.value = true;
        //   updateList(data.id);
        // }
      } else {
        // 自动评审
        addReview({ id: res.data.id }).then(res => {
          getExtractionInfo(proId.value);
        });
        panes.value = [{ title: '第一次评审', content: [], key: '1' }];
        activeKey.value = panes.value[0].key;
        activeKey.newTabIndex = panes.value.length + 1;
      }
    });
  };
  const getExtractionInfos = v => {
    queryInfo({
      id: v,
    }).then(res => {
      console.log('res', res);
      if (res.data.uploadResultsInfo) {
        uploadResultsInfo.value = res.data.uploadResultsInfo;
        console.log('uploadResultsInfo.value', uploadResultsInfo.value);
      }
      state.extractForm = {
        xmbh: res.data.projectNumber, //项目编号
        xmmc: res.data.projectName, //项目编号
        kbsj: res.data.bidOpeningTime, //开标时间
        pbsj: res.data.bidEvaluationTime, //评标时间
        pbdd: res.data.bidEvaluationLocation, //评标地点
        cjr: res.data.updateName, //创建人
        cjsj: res.data.updateTime, //创建时间
        cqzjs: '', //本次抽取专家数
        qrcjs: '', //确认参加人数
      };
      if (res.data.lotteryReviewList.length > 0) {
      } else {
        // 自动评审
        addReview({ id: res.data.id }).then(res => {
          getExtractionInfo(proId.value);
        });
        panes.value = [{ title: '第一次评审', content: [], key: '1' }];
        activeKey.value = panes.value[0].key;
        activeKey.newTabIndex = panes.value.length + 1;
      }
    });
  };
  //抽取结果列表
  const resultColumns = [
    {
      title: '序号',
      customRender: ({ index }) => index + 1,
      width: '5%',
      align: 'center',
    },
    {
      title: '公司编号',
      width: '10%',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '招投标公司',
      dataIndex: 'companyName',
      align: 'center',
    },
    {
      title: '联系人',
      dataIndex: 'contactNames',
      align: 'center',
    },

    {
      title: '联系方式',
      dataIndex: 'contactPhones',
      align: 'center',
    },
    {
      title: '抽取轮次',
      dataIndex: 'extractionRounds',
      align: 'center',
    },
    {
      title: '确认人',
      dataIndex: 'confirmName',
      align: 'center',
    },
    {
      title: '确认时间',
      dataIndex: 'confirmTime',
      width: '10%',
      align: 'center',
    },
    {
      title: '确认状态',
      dataIndex: 'status',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
    },
  ];
  // 结果打印
  const handleResult = () => {
    downloadByUrl({ url: uploadResultsInfo.value.url, fileName: uploadResultsInfo.value.name });
  };
  // 结果打印
  const handlePlot = () => {
    // if (state.extractForm.cqzjs != state.extractForm.qrcjs) {
    //   createConfirm({
    //     iconType: 'warning',
    //     title: '温馨提示',
    //     content: `当前还有招标公司未确认,是否打印结果!`,
    //     onOk: () => {
    //       let data = panes.value.find(item => item.key == activeKey.value);
    //       resultPrinting({ reviewId: data.content.id }).then(res => {
    //         console.log('res', res);
    //         downloadByUrl({ url: res.data.url, fileName: res.data.name });
    //       });
    //     },
    //   });
    // } else {
    let data = panes.value.find(item => item.key == activeKey.value);
    resultPrinting({ reviewId: data.content.id }).then(res => {
      console.log('res', res);
      downloadByUrl({ url: res.data.url, fileName: res.data.name });
    });
    // }
  };
  // 确认参加
  const toConfirmed = v => {
    state.onfirmedInfo.status = '1';
    state.onfirmedInfo.expertId = v.id;
    state.onfirmedInfo.remarks = '';
    let data = panes.value.find(item => item.key == activeKey.value);
    state.onfirmedInfo.id = data.content.id;
    confirmedShow.value = true;
    console.log('toConfirmed', v);
  };
  // 专家抽取
  // 开始抽取
  const hasExtraction = v => {
    // TODO
    // console.log('v.content', v.content.extractExpertsInfo);
    if (v.content.extractExpertsInfo && v.content.extractExpertsInfo.length > 0) {
      let list = v.content.extractExpertsInfo.filter(item => item.status != 2);
      if (dataNum.value > list.length) {
        // dataNum.value = dataNum.value - list.length;
      } else {
        return createMessage.info(`抽取数量与参加待确认人数不一致，请重新输入!`);
      }
    }
    /*
    如果抽取结果有数据 根据类型比较如果确认人数跟抽取人数不对等 可以继续抽取
    */

    // if (v.content && v.content.extractExpertsInfo && v.content.extractExpertsInfo.length > 0) {
    //   //二次抽取时候
    //   let result = calculateDifference(v.content.expertGroupInfo, v.content.extractExpertsInfo);
    //   console.log('result', result);
    //   let resultList = [];
    //   result.forEach(item => {
    //     resultList.push(item.numberOfExtract);
    //   });
    //   result.forEach(item => {
    //     item.numberOfExtract = v.content.id;
    //   });
    //   console.log('result', result);
    //   console.log('resultList', resultList);
    //   fetchAllData(result, resultList);
    // } else {
    //初始化的时候
    // let newArray = v.content.expertGroupInfo.map(({ groupCode, numberOfExtract }) => ({ groupCode, numberOfExtract }));
    // let list = [];
    // newArray.forEach(item => {
    //   list.push(Number(item.numberOfExtract));
    // });
    // newArray.forEach(item => {
    //   item.numberOfExtract = v.content.id;
    // });
    // fetchAllData(dataSource.value, [dataNum.value]);
    // }
    dataIndex.value = 0; //重置索引
    isEndShow.value = false;
    extractedData.value = []; //重置抽取数组
    hasExtractionId.value = v.content.id;
    extractionShow.value = true;
    startTimer();
    startTimers();
  };
  const fetchData = (groupCode, numberOfExtract) => {
    return getExpertsByExpertGroup({ expertGroup: groupCode, reviewId: numberOfExtract });
  };

  const fetchAllData = async (v, list) => {
    try {
      // const promises = v.map(item => fetchData(item.groupCode, item.numberOfExtract));
      // const results = await Promise.all(promises);
      // cqList.value = extractRandomData(results, list); // 处理结果
      // cqList.value = extractRandomData(results, list); // 处理结果
      console.log('cqList.value', cqList.value);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
  function getRandomItems(array, num) {
    if (num >= array.length) return array;
    const shuffled = array.slice().sort(() => 0.5 - Math.random());
    return shuffled.slice(0, num);
  }

  function extractRandomData(data, quantities) {
    return quantities
      .map((quantity, index) => {
        if (index >= data.length) return [];
        return getRandomItems(data[index].data, quantity);
      })
      .flat();
  }
  //重新抽取
  const toErRdraw = async () => {
    dataIndex.value = 0; //重置索引
    extractedData.value = [];
    isEndShow.value = false;
    await stopTimer();
    startTimer();
    startTimers();
  };
  //抽中专家列表
  const expertColumns = [
    {
      title: '公司编号',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      align: 'center',
    },
    {
      title: '联系人',
      dataIndex: 'contactNames',
      align: 'center',
    },
    {
      title: '联系方式',
      dataIndex: 'contactPhones',
      align: 'center',
    },
  ];
  //抽取数组
  const dataArray = ref([
    {
      bh: '编号',
      xm: '张三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
    {
      bh: '编号',
      xm: '张三三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
    {
      bh: '编号',
      xm: '李三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
    {
      bh: '编号',
      xm: '王三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
    {
      bh: '编号',
      xm: '黄三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
    {
      bh: '编号',
      xm: '汪三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
    {
      bh: '编号',
      xm: '谢三',
      dw: '单位',
      lxfs: '1888888888',
      zb: '砖家组',
    },
  ]);
  const extractedData = ref<string[]>([]);
  const timeLeft = ref<number>(0);
  // `timer` 可以是 number 或 null
  let timer: number | null = null;
  let timers: number | null = null;
  const formattedTimeLeft = computed(() => {
    const minutes = Math.floor(timeLeft.value / 60)
      .toString()
      .padStart(2, '0');
    const seconds = (timeLeft.value % 60).toString().padStart(2, '0');
    return `${minutes}:${seconds}`;
  });
  const startTimer = () => {
    if (timer !== null) {
      clearInterval(timer);
    }

    timeLeft.value = 0; // 设置计时器初始值（秒）
    timer = window.setInterval(() => {
      timeLeft.value += 1;
    }, 1000);
  };
  const startTimers = () => {
    if (timers !== null) {
      clearInterval(timers);
    }
    timers = window.setInterval(() => {
      extractData();
    }, 2000);
  };

  const stopTimer = () => {
    if (timer !== null) {
      clearInterval(timer);
      clearInterval(timers);
      timer = null;
      timers = null;
    }
  };

  // const extractData = () => {
  //   if (dataIndex.value < cqList.value.length) {
  //     createMessage.info(`已抽中     ${cqList.value[dataIndex.value].expertName}`);
  //     extractedData.value.push(cqList.value[dataIndex.value]);
  //     dataIndex.value++;
  //   } else {
  //     if (cqList.value.length == 0) {
  //       createMessage.info(`已抽取完毕！`);
  //     } else {
  //       createMessage.info(`已抽取了${cqList.value.length}个,抽取完毕！`);
  //     }
  //     isEndShow.value = true;
  //     stopTimer();
  //   }
  // };
  const extractData = () => {
    if (dataSource.value.length === 0) return;
    let item;
    const availableItems = dataSource.value.filter(i => !extractedData.value.includes(i));
    const randomIndex = Math.floor(Math.random() * availableItems.length);
    item = availableItems[randomIndex];
    console.log('dataSource.value', dataSource.value);
    console.log('dataSource.value', dataNum.value);
    console.log('item', item);
    if (extractedData.value.length >= dataNum.value) {
      // extractedData.value.shift(); //继续抽逻辑
      createMessage.info(`已抽取了${extractedData.value.length}个,抽取完毕！`);
      isEndShow.value = true;
      stopTimer();
      return;
    }
    if (item) {
      createMessage.info(`已抽中     ${item.companyName}`);
      extractedData.value.push(item);
    } else {
      createMessage.info(`抽取失败，抽签库公司数量小于抽取数量！`);
      isEndShow.value = true;
      stopTimer();
      return;
    }
  };

  // 清理计时器
  onUnmounted(() => {
    if (timer !== null) {
      clearInterval(timer);
    }
    if (timers !== null) {
      clearInterval(timers);
    }
  });
  const getValue = row => {
    if (!row) return '--';
    const info = selectOption.value.find(e => e.value == row);
    if (typeof info == 'undefined') return '';
    return info.label;
  };
  const updateList = v => {
    if (v == '') return;
    queryReviewInfo({
      id: v,
    }).then(res => {
      console.log('updateResultData', res);
      if (res.data.extractExpertsInfo && res.data.extractExpertsInfo.length > 0) {
        res.data.extractExpertsInfo = processData(res.data.extractExpertsInfo);
        res.data.extractExpertsInfo.forEach(v => {
          v.contactNames = v.contactNames.join('，');
          v.contactPhones = v.contactPhones.join('，');
        });
        buttonTitle.value = '再次抽取';
      } else {
        buttonTitle.value = '开始抽取';
      }
      console.log('activeKey', activeKey.value);
      panes.value.forEach(item => {
        if (item.key == activeKey.value) {
          item.content = res.data;
        }
      });
      if (res.data.extractExpertsInfo && res.data.extractExpertsInfo.length > 0) {
        const arr1 = res.data.extractExpertsInfo.filter(item => item.status == 0);
        state.extractForm.cqzjs = arr1.length;
      } else {
        state.extractForm.cqzjs = 0;
      }
      state.extractForm.qrcjs = res.data.confirmParticipation;
    });
  };
</script>
<style lang="less">
  .input-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 标签和输入框之间的间距 */
  }

  .label {
    width: 170px; /* 设置标签宽度 */
    margin-right: 0px; /* 标签与输入框之间的间距 */
  }
  a-input {
    flex: 1; /* 使输入框在容器中尽可能扩展 */
    margin: 0 5px; /* 输入框左右的间距 */
  }
  .button {
    position: absolute;
    right: 10px;
  }
  .button-container {
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    justify-content: flex-start; /* 按钮对齐方式，根据需要可以调整 */
  }

  .operation-button {
    white-space: nowrap; /* 防止按钮文本换行 */
  }
  .ant-table-tbody > tr > td {
    padding: 0;
  }
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    padding: 10px 10px 0px 10px; /* Space between header and table */
  }

  .header-title {
    font-weight: bold;
    font-size: 18px; /* Adjust font size as needed */
  }
  .custom-cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dcq-dot {
    width: 4px;
    height: 4px;
    background-color: #ff8d23; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .yzz-dot {
    width: 4px;
    height: 4px;
    background-color: #4e4a4a; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .ygd-dot {
    width: 4px;
    height: 4px;
    background-color: #141313; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .ycq-dot {
    width: 4px;
    height: 4px;
    background-color: #52c41a; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .ant-form-item {
    padding: 10px 30px 0px 20px !important;
  }
  .ant-tabs-content {
    background-color: #f0f2f5;
    margin-bottom: 10px;
  }
  .fullscreen-container {
    height: 80vh;
    width: 100vw;
    overflow: auto;
  }
  .tabs-container {
    height: 100vh; /* 设置容器高度为视口高度 */
    width: 100vw;
  }

  .tab-content {
    width: 100%;
  }
  .detail {
    &_top {
      background-color: #fafafa;
    }
    &_title {
      padding: 10px;
      font-weight: bold;
      font-size: 18px; /* Adjust font size as needed */
    }
    &_bottom {
      position: relative;
      padding: 10px 0;
      background-color: #fafafa;
      &_btn {
        display: flex;
        justify-content: space-between;
        line-height: 25px;
        margin-right: 25px;
      }
    }
  }
  .container {
    margin: 15px 0 20px 0;
    display: flex;
    width: 100%; /* 使容器宽度为100% */
    height: 35px; /* 设置高度 */
  }
  .box {
    flex: 1; /* 使每个盒子等分宽度 */
    display: flex;
    font-weight: bold;
    padding: 0 10px;
    span {
      font-weight: normal;
      font-family: 'Microsoft YaHei';
    }
  }
  .btn_add {
    position: absolute;
    right: 25px;
    z-index: 2;
  }
  .ant-popover-buttons {
    display: flex;
  }
  .btn_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn_submit {
    margin-top: 10px;
  }
  .tab_box {
    position: relative;
    display: flex;
  }

  .extraction_box {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-top: 20px;
    width: 100%;
    padding: 0 25px;
    height: 80px;
    line-height: 80px;
    background-color: #fafafa;
  }
  .result_box {
    // background-color: skyblue;
    margin-top: 20px;
    line-height: 10px;
    background-color: #fafafa;
    &_btn {
      display: flex;
      justify-content: space-between;
      margin-right: 25px;
      margin-bottom: 10px;
      padding-top: 10px;
    }
    &_title {
      padding: 10px;
      font-weight: bold;
      font-size: 18px;
    }
  }
  .ext_box {
    width: 100%;
    height: 400px;
    display: flex;
  }
  .ext_left {
    width: 40%;
    text-align: center;
  }
  .ext_time {
    margin: 50px auto;
    width: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 60px;
    font-family: fangsong;
    font-weight: bold;
    height: 200px;
    border-radius: 50%;
    background-color: #fff4eb;
    border: 2px solid #ff8d23;
    color: #ff8d23;
    position: relative;
    .end {
      font-size: 24px;
      position: absolute;
      color: #ea0000;
      bottom: -56px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .ext_right {
    width: 60%;
  }
</style>
<style lang="less" scoped>
  // :deep(.jnpf-content-wrapper-content .ant-table-tbody) {
  //   height: 400px;
  // }
  :deep(.jnpf-content-wrapper-content .ant-table-empty .ant-table-tbody > tr.ant-table-placeholder) {
    height: 400px;
  }
  :deep(.result_box .ant-table) {
    height: 400px;
  }
  :deep(.ant-table-thead > tr > th) {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
  }
  :deep(.ant-table-tbody > tr > td) {
    color: rgba(0, 0, 0, 0.85);
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
  }
  :deep(.detail_bottom .ant-table-tbody > tr > td) {
    padding: 5px;
  }
  .back-btn {
    margin-bottom: 15px;
    margin-left: 5px;
  }
</style>
